<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加角色</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<div class="layui-form-item">
			<label class="layui-form-label">角色名称</label>
			<div class="layui-input-block">
				<input type="text" name="name" placeholder="角色名称" autocomplete="off" class="layui-input" lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">角色备注</label>
			<div class="layui-input-block">
				<input type="text" name="memo" placeholder="角色备注" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">角色权限</label>
			<div class="layui-input-block">
				<div id="permissionTree"></div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
	layui.use(["form", "tree", "okLayer", "okUtils", "okMock"], function () {
		let form = layui.form;
		let tree = layui.tree;
		let okMock = layui.okMock;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;

		okUtils.ajax(okMock.api.menu.sys_menu_list, "get").done(function (response) {
			var data = dataProcess(response.data, {});
			tree.render({
				elem: "#permissionTree",
				data: data,
				showCheckbox: true,
				id: 'typeTree',
			});
		}).fail(function (error) {});


		//表单提交
		form.on("submit(add)", function (data) {
			var checkedData = tree.getChecked('typeTree'); //获取选中节点的数据
			menus = [];//初始化,避免重复，清空
			//根据选中节点，处理api所需菜单及权限数据
			api_dataProcess(checkedData, {});
			var str_menus = api_menus_Process(menus);

			//组合提交的表单数据
			data.field.menus = str_menus;

			//提交
			okUtils.ajax(okMock.api.role.insert, "post", data.field).done(function (response) {
				if (response.code == HTTP_OK) {
					okLayer.greenTickMsg(response.message, function () {
						parent.layer.close(parent.layer.getFrameIndex(window.name));
					});
				} else {
					layer.msg(response.message, { icon: 2, time: 2000 });
				}
			}).fail(function (error) {});

			return false;
		});


		//格式化处理树展示的数据
		function dataProcess(data,obj) {
			var obj= obj || {} ;
			// 循环第一层数据
			data.forEach(function (item) {
				obj.children === undefined ? obj.children = [] : '';
				var _obj1 = {};
				_obj1.title = item.title;
				_obj1.spread = true;
				_obj1.id = item.id;
				// 判断是否包涵action字段,若有则进行格式清洗
				if (item.action !== '' && item.action !== null) {
					var all_actions = actionFormat(item.action, item.id);
					_obj1.children = all_actions;
				}
				obj.children.push(_obj1);
				// 判断/循环第二层数据
				if (item.children) {
					var children_1 = item.children;
					dataProcess(children_1,_obj1);
				}
			});
			return obj.children;
		}

		//把菜单的权限数字，整理成文字
		function actionFormat(all_actions, pid) {
			// 权限： 1=新增   2=删除   3=修改   4=查看
			var all_actions = all_actions.split('|');
			var _ary = [];
			all_actions.forEach(function (item) {
				var _obj4 = {};
				switch (item) {
					case '1':
						_obj4.title = '新增';
						_obj4.spread = false;
						_obj4.id = pid + "_1";
						_obj4.sid = 1;
						break;
					case '2':
						_obj4.title = '删除';
						_obj4.spread = false;
						_obj4.id = pid + "_3";;
						_obj4.sid = 2;
						break;
					case '3':
						_obj4.title = '修改';
						_obj4.spread = false;
						_obj4.id = pid + "_2";
						_obj4.sid = 3;
						break;
					case '4':
						_obj4.title = '查看';
						_obj4.spread = false;
						_obj4.id = pid + "_4";;
						_obj4.sid = 4;
						break;
				}
				_obj4.type = "action";
				_ary.push(_obj4);
			});
			return _ary;
		}


		//处理组合API菜单权限
		function api_dataProcess(data,obj) {
			var obj= obj || {} ;
			// 循环第一层数据
			data.forEach(function (item) {
				var _obj1 = {};
				// 判断是否有type字段,若有则进行格式清洗
				if (typeof(item.type) == "undefined" ) {
					_obj1.menu_id = item.id;
					_obj1.actions="";
				}else{
					_obj1.menu_id =obj.menu_id;
					_obj1.actions=item.sid;
				}
				menus.push(_obj1);
				// 判断循环第二层数据
				if (item.children) {
					var children_1 = item.children;
					api_dataProcess(children_1,_obj1);
				}
			});
		}

		//根据处理后的菜单数组再次组合API菜单权限
		function api_menus_Process(data) {
			var menus_action = [];
			var skey = [];
			var str = "";
			data.forEach(function (item) {
				if(item.actions ==""){
					str =item.actions;
				}else{
					str=str+item.actions+",";
				}
				skey[item.menu_id]=str;
			});

			skey.forEach(function (item,key) {
				if (item !== ""){
					item=item.substring(0,item.length-1);
				}
				var obj={};
				obj.menu_id=key;
				obj.actions=item;
				menus_action.push(obj);
			});
			return JSON.stringify(menus_action);
		}


	})
</script>
</body>
</html>
